<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        computed 是以属性的方式访问{{temp}}
                 有缓存
        methods  是需要通过()来执行函数体 {{temp()}}
        如果页面中有多次调用，compouted 调用一次，methods 有多次调用执行多少回
        对于复杂的逻辑计算时，选用计算属性。
        watch     当数据发生变化时，需要去执行其他的响应操作时。(AJAX 或者其他开销较大的操作)

    -->
    <div id="box">
        <input type="text" v-model="firstname">
        <input type="text" v-model="lastname">
        <!-- <input type="text" v-model="fullname"> -->
        <div>
            {{fullname}}    {{fullname}}    {{fullname}}
        </div>
        <div>
            {{getFullName()}}   {{getFullName()}}   {{getFullName()}}
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#box",
            data:{
                firstname:"",
                lastname:""
            },
            computed:{
                fullname(){
                    console.log("computed");
                    return this.firstname + this.lastname;
                }
            },
            methods:{
                getFullName(){
                    console.log("methods");
                    return this.firstname + this.lastname;
                }
            }
        })
    </script>
</body>
</html>